<template>
  <div :class="{'table-empty': mode === 'table','no-border':noBorder, 'border': isBorder}" class="empty-class">
    <div class="empty-box">
      <img :src="emptyIcon" alt=""> {{ emptyText }}
    </div>
  </div>
</template>

<script>
import emptyIcon from '@/assets/empty-invoice.png';
export default {
  props: {
    mode: {
      type: String,
      default: ''
    },
    isBorder: {
      type: Boolean,
      default: false
    },
    noBorder: {
      type: Boolean,
      default: false
    },
    emptyText: {
      type: String,
      default: '暂无数据'
    }
  },
  data() {
    return {
      emptyIcon
    };
  }
};
</script>

<style lang="scss" scoped>
.empty-class {
  color: #999999;
  text-align: center;
  font-size: 14px;
  padding: 12px 0 18px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #EBEEFD;
  &.table-empty {
    padding: 0;
    border-bottom: none;
  }
  &.no-border {
    border-bottom: none;
  }
  &.border {
    padding-bottom: 18px;
    border-bottom: 1px solid #EBEEFD;
  }
  .empty-box {
    display: flex;
    align-items: center;
  }
  img {
    width: 12px;
    margin-right: 4px;
  }
  .el-dropdown-link {
    cursor: pointer;
  }
}
</style>
